<template>
	<view v-if="popup.show" class="popup-container" :style="{'top':appStore.navbarHeight+'px'}">
		<view @click="goChat" class="popup-content animate__animated" :class="popup.class" :style="{'--duration':popup.__duration+'ms'}">
			<view class="fr-ac-jsb" style="color: #eee;">
				<view class="fs-26">
					您收到一条消息
				</view>
				<view class="fs-24">
					现在
				</view>
			</view>
			<view class="fs-32 mt-15 ellipsis-2" style="color: #fff;">
				{{popup.message.data}}
			</view>
		</view>
	</view>
</template>
<script setup>
	import { 
		reactive,
		watch,
		nextTick
	} from 'vue'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useChatStore
	} from '@/store/chat'
	import { onHide, onShow } from '@dcloudio/uni-app'
	const appStore = useAppStore()
	const chatStore = useChatStore()
	
	const popup = reactive({
		show:false,
		message:null,
		
		class:'', // 动画class
		__duration:300, // 动画时长
		__timer:null, //定时器ID
		__timer_gap:3000, // 定时器间隔
		
	})
	
	// 配置不需要展示此组件的页面
	const no_open_page = [
		'/pages/chat/list',
		'pages/chat/chat'
	]
	
	let MessageWatch

	onShow(()=>{
		const pages = getCurrentPages() // 获取栈实例
		const fullPath = pages[pages.length - 1].$page.fullPath
		if(no_open_page.findIndex(e=>fullPath.includes(e)) !== -1){
			return
		}
		MessageWatch = watch(()=>JSON.parse(JSON.stringify(chatStore.receive_list)),async(newVal,oldVal)=>{
			if(newVal.length > oldVal.length){
				await openMessage(chatStore.receive_list.pop())
			}
		},{
			deep:true
		})
	})
	onHide(()=>{
		if(MessageWatch){
			MessageWatch()
			MessageWatch = null
		}
	})
	
	async function openMessage(msg){
		popup.show = true
		popup.message = msg
		
		await nextTick(()=>{
			popup.class = 'animate__open'
		})
		if(popup.__timer){
			clearTimeout(popup.__timer)
			popup.__timer = setTimeout(async()=>{
				await closeMessage()
			},popup.__timer_gap)
		}else{
			popup.__timer = setTimeout(async()=>{
				await closeMessage()
				clearTimeout(popup.__timer)
			},popup.__timer_gap)
		}
		
	}
	async function closeMessage(){
		popup.class = 'animate__close'
		await setTimeout(()=>{
			popup.message = null
			popup.show = false
		},popup.__duration)
	}
	
	function goChat(){
		uni.navigateTo({
			url:`/pages/chat/chat?receiver_id=${popup.message.from_id}&sender_id=${popup.message.to_id}&school_id=${popup.message.school_id}`
		})
	}
	
</script>

<style lang="scss">

	.popup-container {
		--duration:'';
		--color:#1676ff;
		
		position: fixed;
		/* #ifdef H5 */
		width: 750rpx;
		/* #endif */
		/* #ifndef H5 */
		width: 100%;
		/* #endif */
		top: 0;
		left: 0;
		z-index: 9996;
		
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	
	.popup-content{
		border-radius: 38rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		background-color: lin;
		background: linear-gradient(to bottom right,rgba(0, 0, 0, 0.6) 0% ,rgba(0, 0, 0, 0.2) 100% );
		backdrop-filter: blur(28rpx);
	}
	
	.animate__animated {
		-webkit-animation-duration: var(--duration);
		animation-duration: var(--duration);
		-webkit-animation-duration: var(--duration);
		animation-duration: var(--duration);
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
	
	
	
	.animate__open{
		-webkit-animation-name: open;
		animation-name: open;
	}
	@-webkit-keyframes open {
		from {
			opacity: 0;
			transform: scale(0);
		}
	
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	@keyframes open {
		from {
			opacity: 0;
			transform: scale(0);
		}
	
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	
	.animate__close{
		-webkit-animation-name: close;
		animation-name: close;
	}
	@-webkit-keyframes close {
		from {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	
		to {
			opacity: 0;
			-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
		}
	}
	@keyframes close {
		from {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
			
		to {
			opacity: 0;
			-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
		}
	}
	
	
</style>